<template>
    <view class="container">
        <!-- <view class="inforClass">任务与问答</view> -->

        <view class="w100 h-82 rowsc rowsm">
            <view class="rows rowsm">
                <view class="w-48 h-8" style="background: linear-gradient(to right,#F7F7F7,#4889FF);"></view>
                <view class="fs-30 col333 fw-b ml-10 mr-10">任务与问答</view>
                <view class="w-48 h-8" style="background: linear-gradient(to left,#F7F7F7,#4889FF);"></view>
            </view>
        </view>
        <view class="table">
            <view class="table-row header fs-20 rowsc rowsm h100" style="background: #F4F7FF;align-items: stretch;">
                <view class="table-cell pt-10">实践课程</view>
                <view class="table-cell pt-10"> 类 别 </view>
                <view class="table-cell pt-10">总 成 绩</view>
                <view class="table-cell pt-10">总 积 分</view>
                <view class="table-cell">实践任务成绩</view>
                <view class="table-cell">实践任务积分</view>
                <view class="table-cell">知识问答成绩</view>
                <view class="table-cell">知识问答积分</view>
            </view>
            <view class="table-row fs-18" v-for="(item, index) in myScoreList" :key="index + 1"
                :style="index % 2 == 0 ? 'background:#fff;' : 'background:#F4F4F4;'">
                <view class="table-cell">
                    <view class="rowsc rowsm" style="width: 100%; height: 100%; margin: auto;">
                        {{ item.practiceTypeName }}
                        <!-- {{ item.practiceType == 1 ? '劳动教育' : item.practiceType == 2 ? '职业素养' : item.practiceType == 3 ?
                            '应急安全' :
                            item.practiceType == 4 ? '思政实践' : '创新创业' }} -->
                    </view>
                </view>
                <view class="table-cell">
                    <view class="p-all-10 cell-item rowsc rowsm" style="border-bottom: 1px solid #ccc;">成绩设置</view>
                    <view class="p-all-10 cell-item rowsc rowsm">我的成绩</view>
                </view>
                <view class="table-cell">
                    <view class="p-all-10 cell-item rowsc rowsm" style="border-bottom: 1px solid #ccc;">{{
                        item.studentTaskChildren.scoreConfig.score || '-' }}</view>
                    <view class="p-all-10 cell-item rowsc rowsm"
                        :class="item.studentTaskChildren.myScore.score != null && item.studentTaskChildren.myScore.score < 60 ? 'Unqualified' : ''">
                        {{ item.studentTaskChildren.myScore.score != null ?
                            item.studentTaskChildren.myScore.score : '-' }}
                    </view>
                </view>
                <view class="table-cell">
                    <view class="p-all-10 cell-item rowsc rowsm" style="border-bottom: 1px solid #ccc;">
                        {{ item.studentTaskChildren.scoreConfig.allPoints || '-' }}
                    </view>
                    <view class="p-all-10 cell-item rowsc rowsm"
                        :class="item.studentTaskChildren.myScore.allPoints != null && item.studentTaskChildren.scoreConfig.allPoints * 0.6 > item.studentTaskChildren.myScore.allPoints ? 'Unqualified' : ''">
                        {{ item.studentTaskChildren.myScore.allPoints != null ?
                            item.studentTaskChildren.myScore.allPoints : '-' }}
                    </view>
                </view>
                <view class="table-cell">
                    <view class="p-all-10 cell-item rowsc rowsm" style="border-bottom: 1px solid #ccc;">-</view>
                    <view class="p-all-10 cell-item rowsc rowsm">{{ item.studentTaskChildren.myScore.practiceTaskScore ||
                        '-' }}</view>
                </view>
                <view class="table-cell">
                    <view class="p-all-10 cell-item rowsc rowsm" style="border-bottom: 1px solid #ccc;">-</view>
                    <view class="p-all-10 cell-item rowsc rowsm">{{ item.studentTaskChildren.myScore.practiceTaskPoints ||
                        '-' }}</view>
                </view>
                <view class="table-cell">
                    <view class="p-all-10 cell-item rowsc rowsm" style="border-bottom: 1px solid #ccc;">-</view>
                    <view class="p-all-10 cell-item rowsc rowsm">{{ item.studentTaskChildren.myScore.testPaperScore || '-'
                    }}</view>
                </view>
                <view class="table-cell">
                    <view class="p-all-10 cell-item rowsc rowsm" style="border-bottom: 1px solid #ccc;">-</view>
                    <view class="p-all-10 cell-item rowsc rowsm">{{ item.studentTaskChildren.myScore.testPaperPoints || '-'
                    }}</view>
                </view>
            </view>
        </view>

        <!-- <view class="inforClass pt-20">积分分布</view> -->

        <view class="w100 h-82 rowsc rowsm">
            <view class="rows rowsm">
                <view class="w-48 h-8" style="background: linear-gradient(to right,#F7F7F7,#4889FF);"></view>
                <view class="fs-30 col333 fw-b ml-10 mr-10">积分分布</view>
                <view class="w-48 h-8" style="background: linear-gradient(to left,#F7F7F7,#4889FF);"></view>
            </view>
        </view>
        <view class="table">
            <view class="table-row header fs-20 rowsc rowsm h100" style="background: #F4F7FF;align-items: stretch;">
                <view class="table-cell pt-10">实践课程</view>
                <view class="table-cell pt-10">类别</view>
                <view class="table-cell">第一学期积分</view>
                <view class="table-cell">第二学期积分</view>
                <view class="table-cell">第三学期积分</view>
                <view class="table-cell">第四学期积分</view>
                <view class="table-cell">第五学期积分</view>
                <view class="table-cell">第六学期积分</view>
            </view>
            <view class="table-row fs-18" v-for="(item, index) in mySemesterScoreList" :key="index + 1"
                :style="index % 2 == 0 ? 'background:#fff;' : 'background:#F4F4F4;'">
                <view class="table-cell">
                    <view class="rowsc rowsm" style="width: 100%; height: 100%; margin: auto;">
                        {{ item.practiceTypeName }}
                        <!-- {{ item.practiceType == 1 ? '劳动教育' : item.practiceType == 2 ? '职业素养' : item.practiceType == 3 ?
                            '应急安全' :
                            item.practiceType == 4 ? '思政实践' : '创新创业' }} -->
                    </view>
                </view>
                <view class="table-cell">
                    <view class="p-all-10 cell-item rowsc rowsm" style="border-bottom: 1px solid #ccc;">积分设置</view>
                    <view class="p-all-10 cell-item rowsc rowsm">我的积分</view>
                </view>
                <view class="table-cell">
                    <view class="p-all-10 cell-item rowsc rowsm" style="border-bottom: 1px solid #ccc;">
                        {{ item.studentTaskChildren.scoreConfig.firstTermPoints || '-' }}
                    </view>
                    <view class="p-all-10 cell-item rowsc rowsm"
                        :class="item.studentTaskChildren.myScore.firstTermPoints != null && item.studentTaskChildren.scoreConfig.firstTermPoints * 0.6 > item.studentTaskChildren.myScore.firstTermPoints ? 'Unqualified' : ''">
                        {{ item.studentTaskChildren.myScore.firstTermPoints != null ?
                            item.studentTaskChildren.myScore.firstTermPoints : '-' }}
                    </view>
                </view>
                <view class="table-cell">
                    <view class="p-all-10 cell-item rowsc rowsm" style="border-bottom: 1px solid #ccc;">
                        {{ item.studentTaskChildren.scoreConfig.secondTermPoints || '-' }}
                    </view>
                    <view class="p-all-10 cell-item rowsc rowsm"
                        :class="item.studentTaskChildren.myScore.secondTermPoints != null && item.studentTaskChildren.scoreConfig.secondTermPoints * 0.6 > item.studentTaskChildren.myScore.secondTermPoints ? 'Unqualified' : ''">
                        {{ item.studentTaskChildren.myScore.secondTermPoints != null ?
                            item.studentTaskChildren.myScore.secondTermPoints : '-' }}
                    </view>
                </view>
                <view class="table-cell">
                    <view class="p-all-10 cell-item rowsc rowsm" style="border-bottom: 1px solid #ccc;">
                        {{ item.studentTaskChildren.scoreConfig.thirdTermPoints || '-' }}
                    </view>
                    <view class="p-all-10 cell-item rowsc rowsm"
                        :class="item.studentTaskChildren.myScore.thirdTermPoints != null && item.studentTaskChildren.scoreConfig.thirdTermPoints * 0.6 > item.studentTaskChildren.myScore.thirdTermPoints ? 'Unqualified' : ''">
                        {{ item.studentTaskChildren.myScore.thirdTermPoints != null ?
                            item.studentTaskChildren.myScore.thirdTermPoints : '-' }}
                    </view>
                </view>
                <view class="table-cell">
                    <view class="p-all-10 cell-item rowsc rowsm" style="border-bottom: 1px solid #ccc;">
                        {{ item.studentTaskChildren.scoreConfig.fourthTermPoints || '-' }}
                    </view>
                    <view class="p-all-10 cell-item rowsc rowsm"
                        :class="item.studentTaskChildren.myScore.fourthTermPoints != null && item.studentTaskChildren.scoreConfig.fourthTermPoints * 0.6 > item.studentTaskChildren.myScore.fourthTermPoints ? 'Unqualified' : ''">
                        {{ item.studentTaskChildren.myScore.fourthTermPoints != null ?
                            item.studentTaskChildren.myScore.fourthTermPoints : '-' }}
                    </view>
                </view>
                <view class="table-cell">
                    <view class="p-all-10 cell-item rowsc rowsm" style="border-bottom: 1px solid #ccc;">
                        {{ item.studentTaskChildren.scoreConfig.fifthTermPoints || '-' }}
                    </view>
                    <view class="p-all-10 cell-item rowsc rowsm"
                        :class="item.studentTaskChildren.myScore.fifthTermPoints != null && item.studentTaskChildren.scoreConfig.fifthTermPoints * 0.6 > item.studentTaskChildren.myScore.fifthTermPoints ? 'Unqualified' : ''">
                        {{ item.studentTaskChildren.myScore.fifthTermPoints != null ?
                            item.studentTaskChildren.myScore.fifthTermPoints : '-' }}
                    </view>
                </view>
                <view class="table-cell">
                    <view class="p-all-10 cell-item rowsc rowsm" style="border-bottom: 1px solid #ccc;">
                        {{ item.studentTaskChildren.scoreConfig.sixthTermPoints || '-' }}
                    </view>
                    <view class="p-all-10 cell-item rowsc rowsm"
                        :class="item.studentTaskChildren.myScore.sixthTermPoints != null && item.studentTaskChildren.scoreConfig.sixthTermPoints * 0.6 > item.studentTaskChildren.myScore.sixthTermPoints ? 'Unqualified' : ''">
                        {{ item.studentTaskChildren.myScore.sixthTermPoints != null ?
                            item.studentTaskChildren.myScore.sixthTermPoints : '-' }}
                    </view>
                </view>
            </view>
        </view>
        <view class="mt-20 mb-10 fs-26">
            说明: 
        </view>
        <view class="fs-24" style="text-indent: 2em">
            1. 每门课程总成绩 = 本门课程获得积分 / 本门课程设置总积分  * 100
        </view>
        <view class="fs-24" style="text-indent: 2em">
            2. 总积分 = 第一学期积分 + 第二学期积分 + 第三学期积分 + 第四学期积分 + 第五学期积分 + 第六学期积分
        </view>
    </view>
</template>
  
<script>
export default {
    data() {
        return {
            myScoreList: [],
            mySemesterScoreList: [],
        };
    },
    onLoad(e) {
        this.getList();
    },
    methods: {
        getList() {
            this.$tools.axiosFromToken('GET', `project/semester/config/myScore`, {}, '加载中').then(res => {
                if (res.code != 200) return this.$tools.showtt(res.msg)
                this.myScoreList = res.data;
            })
            this.$tools.axiosFromToken('GET', `project/semester/config/mySemesterScore`, {}, '加载中').then(res => {
                if (res.code != 200) return this.$tools.showtt(res.msg)
                this.mySemesterScoreList = res.data;
            })
        },
    }
};
</script>
  
<style>
.container {
    padding: 10px;
    padding-top: 0;
}

.table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
    border-bottom: 0;
}

.table-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
}

.table-cell {
    flex: 1;
    /* padding: 10px; */
    text-align: center;
    border-right: 1px solid #ccc;
    vertical-align: middle;
    line-height: 1.5;
    align-items: center;
}

.table-cell:last-child {
    border-right: none;
}

.header {
    line-height: 1;
    font-weight: bold;
    background-color: #f5f5f5;
}

.cell-item {
    width: 100%;
    height: 50%;
    text-align: center;
}

.inforClass {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    margin: 8px 0;
}

.inforClass::before {
    content: '';
    width: 5px;
    height: 20px;
    background-color: #007AFF;
    margin-right: 5px;
    display: inline-block;
}

.Unqualified {
    background: #fe6c6c;
    color: #fff;
}
</style>